/**
 * 扫码登录企业微信
 */
import { SyncOutlined } from '@ant-design/icons'
import { Button, Spin, Alert, Result } from 'antd'
import { useContainer, useScanStatus, Status } from '@/desktop/logics/container'
import { useConfirmQywxLimit } from '@/desktop/logics/qywx/limit'
import { spin, fullAbsolute, flexCenter } from '@/desktop/styles'

export function ScanAddQywx() {
  const passed = useConfirmQywxLimit()
  return <div css={s.wrap}>
    <Alert
      showIcon
      type="info"
      message={
        <>
          请用 <strong>企业微信</strong> 扫码登录
        </>
      }
    />
    {passed === true ? <QRCode /> : <LimitNotPassed status={passed} />}
  </div>
}

function LimitNotPassed({ status }: { status: null | false | string }) {
  return <Spin spinning={status === null} tip="正在确认账号授权...">
    <main css={s.notPassed}>
      {status === false ? (
        <Result status="error" title="无法登录企微" subTitle="登录企微数已到上限" />
      ) : null}
      {typeof status === 'string' ? (
        <Result status="error" title="无法登录企微" subTitle={status} />
      ) : null}
    </main>
  </Spin>
}

function QRCode() {
  const [loggedIn, setLoggedIn] = useState(false)
  const onLoggedIn = useCallback(() => setLoggedIn(true), [])

  const { usable, refresh } = useContainer(onLoggedIn)
  const { scaned } = useScanStatus(
    usable.status === Status.Normal ? usable.data.hostname : undefined,
    refresh,
  )

  const clearLoggedIn = useCallback(() => {
    refresh()
    setLoggedIn(false)
  }, [refresh])

  if (loggedIn) {
    return <Result
      status="success"
      title="企微登录成功"
      extra={
        <Button type="primary" onClick={clearLoggedIn}>
          登录下一个
        </Button>
      }
    />
  }

  if (usable.status === Status.Error) {
    return <Result
      status="error"
      title="二维码生成失败"
      subTitle={usable.message}
      extra={[
        <Button type="primary" key="refresh" onClick={refresh}>
          重试
        </Button>,
      ]}
    />
  }

  return <Spin
    spinning={usable.status === Status.Loading}
    delay={1000}
    tip="正在启动一台 Windows 主机"
    css={s.spin}
  >
    <div css={s.qrcodeWrap}>
      <div css={s.qrcode}>
        {usable.status === Status.Normal ? <img src={usable.data.qrcode} /> : null}
        {scaned ? <div className="scaned">已扫码</div> : null}
      </div>
      <Button
        css={s.refresh}
        type="link"
        icon={<SyncOutlined />}
        onClick={refresh}
        disabled={usable.status !== Status.Normal}
      >
        刷新二维码
      </Button>
    </div>
  </Spin>
}

const s = {
  wrap: css`
    max-width: 650px;
    margin: 0 auto;
  `,

  notPassed: css`
    min-height: 200px;
    padding: 20px 0;
  `,

  spin: css`
    ${spin(40)};
  `,
  qrcodeWrap: css`
    padding: 35px 0;
  `,
  qrcode: css`
    background-color: #fcfcfc;
    border-radius: 4px;
    height: 220px;
    margin: 0 auto;
    position: relative;
    width: 220px;
    img {
      border-radius: 4px;
      border: 1px solid #e5e5e5;
      display: block;
      height: 100%;
      width: 100%;
    }
    .scaned {
      ${flexCenter};
      ${fullAbsolute};
      background-color: rgba(255, 255, 255, 0.85);
      color: #222;
      font-size: 20px;
      letter-spacing: 1px;
    }
  `,
  refresh: css`
    display: block;
    margin: 14px auto 0;
  `,
}
